<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .expand.pear-btn {
            border: 1px solid rgba(255, 255, 255, 0)
        }
        .layui-table-cell button{
            font-size: 12px;
        }
        .layui-table-box button {
            font-size: 12.5px !important;
            float: left;
            margin-right: 5px; /* 根据需要调整间距 */
        }
    </style>
</head>

<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>


<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="details" title="查看矿井信息以及评分">
        <i class="layui-icon layui-icon-tips-fill"></i>详情</button>
</script>


<script type="text/html" id="user-sex">
    {{#if (d.sex == 1) { }}
    <span>男</span>
    {{# }else if(d.sex == 2){ }}
    <span>女</span>
    {{# } }}
</script>


<script src="../component/layui/layui.js"></script>
<script src="../component/pear/pear.js"></script>
<script src="../scripts/utils/request.js"></script>
<script src="../scripts/utils/auth.js"></script>
<script>
    var $,table,form,drawer,popup,notice
    layui.use(['table', 'form', 'jquery', 'drawer', 'popup','notice'], function() {
        table = layui.table;
        form = layui.form;
        $ = layui.jquery;
        drawer = layui.drawer;
        popup = layui.popup;
        notice = layui.notice;

        table.render({
            id:"user-table",
            elem: '#user-table',
            url: baseURL+'/api/mine/getAllMineListByPf',
            method:'post',
            contentType: 'application/json',
            page: false,
            loading:true,
            headers: {
                token: localStorage.getItem("token")
            },
            cols: [[
                {field: 'mineAreaName', minWidth: 150, title: '矿区名称',align:'center'},
                {field: 'mineName', minWidth: 180, title: '矿井名称'},
                {field: 'mineType', title: '矿井类别'},
                {field: 'mineState', title: '瓦斯智能抽采',templet: function(d){
                    if(d.mineState!=null && d.mineState.includes("1")){
                        return '<span style="color:red">有</span>'
                    }else{
                        return "无"
                    }
                }},
                {field: 'mineState', title: '瓦斯智能防突',templet: function(d){
                    if(d.mineState!=null && d.mineState.includes("2")){
                        return '<span style="color:red">有</span>'
                    }else{
                        return "无"
                    }
                }},
                {field: 'mineState', title: '立井提升',templet: function(d){
                    if(d.mineState!=null && d.mineState.includes("3")){
                        return '<span style="color:red">有</span>'
                    }else{
                        return "无"
                    }
                }},
                {field: 'mineState', title: '轨道运输',templet: function(d){
                    if(d.mineState!=null && d.mineState.includes("4")){
                        return '<span style="color:red">有</span>'
                    }else{
                        return "无"
                    }
                }},
                {field: 'pfCount', title: '评分次数',templet:function(d){
                    return d.pfCount
                }},
                {title: '操作',templet: '#user-bar', width: 180, align: 'center'}
            ]],
            skin: 'grid',
            toolbar: false,
            defaultToolbar: false,
            done: function(res, curr, count) {
                validToken(res);
                if(res.code===0){
                    /* 需要合并栏目的数组信息 */
                    var merge_column_infos = [
                        {
                            /* 该字段起到一个标注作用，类似于注释 */
                            field: "interface_group_name",
                            index: 0   /* 需要合并栏目的索引 */
                        }
                    ];
                    /* 从第几行开始遍历合并 去除表头就是 1 咯 */
                    var start_tr_index = 0;
                    /* 查找到需要合并表格所有的 tr */
                    var tr_s = $(".layui-table-body,.layui-table-main>table>tbody").find("tr");
                    /* 开始遍历需要合并的栏目 */
                    for (var merge_item of merge_column_infos) {
                        var field = merge_item.field;
                        /* 需要合并栏目的索引 */
                        var index = merge_item.index;
                        /* 需要合并栏目的数量 */
                        var merge_num = 0;
                        /* 需要合并栏目的 td */
                        var merge_tds = [];
                        /* 开始遍历需要合并表格的所有 tr */
                        for (var i = start_tr_index; i < tr_s.length; i++) {
                            /* 当前 td */
                            var cur_td = tr_s.eq(i).find("td").eq(index);
                            /* 下一个 td */
                            var next_td = tr_s.eq(i + 1).find("td").eq(index);
                            /* 当前 td 的 text */
                            var cur_text = $(cur_td).text();
                            /* 下一个 td 的 text 当遍历到最后默认为空 */
                            var next_text = $(next_td).text();
                            /* 如果当前 td = 下一个 td */
                            if (cur_text == next_text) {
                                /* 放入到合并 td 的集合中 */
                                merge_tds.push(cur_td);
                                /* 需要合并的 td 数量加 1 */
                                merge_num++;
                            } else {
                                /* 如果 如果当前 td != 下一个 td 且要合并的 td 数量不等于 0 */
                                if (merge_num != 0) {
                                    /* 第一个 td 合并    因为动态添加 rowspan 属性是向下延申  */
                                    $(merge_tds[0]).attr("rowspan", merge_num + 1);
                                    /* 遍历所有的需要合并的 td 将他们的属性设置为 不可见 */
                                    for (var d = 1; d < merge_tds.length; d++) {
                                        $(merge_tds[d]).addClass("layui-hide");
                                    }
                                    /* 当前 td 属性也需要设置为不可见 */
                                    $(cur_td).addClass("layui-hide");
                                }
                                /* 重置合并 td 数据 */
                                merge_num = 0;
                                merge_tds = [];
                            }
                        }
                    }
                }
            }
        });

        table.on('tool(user-table)', function(obj) {
            if(obj.event==='details'){
                parent.layui.admin.addTab(obj.data.id,obj.data.mineName+'基本信息',"./page/mineinfo.html?id="+obj.data.id);
            }
        });

        table.on('toolbar(user-table)', function(obj) {
            if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        window.refresh = function(param) {
            table.reload('user-table');
        }
    })
</script>
</body>

</html>
